/*
 * @Descripttion: 点击空白页隐藏表单
 * @Author: armin
 * @Date: 2021-07-16 16:04:36
 * @LastEditors: armin
 * @LastEditTime: 2021-09-09 11:36:02
 */
import { ref, onMounted, onUnmounted, Ref } from 'vue'
// Ref 代表一个类型
const useClickOutside = (elementRef: Ref<null | HTMLElement>) => {
  const isClickOutside = ref(false) // 是否点到了外面
  const handler = (e: MouseEvent) => {
    if (elementRef.value) {
      // contains： 是否包含另一个DOM节点，由于e.target不是任何时候都是HTMLElement 所以需要用 as 类型断言
      if (elementRef.value.contains(e.target as HTMLElement)) {
        isClickOutside.value = false
      } else {
        isClickOutside.value = true
      }
    }
  }
  // 页面初始化时挂载事件 handler
  onMounted(() => {
    document.addEventListener('click', handler)
  })
  // 页面销毁时清除事件
  onUnmounted(() => {
    document.removeEventListener('click', handler)
  })
  return isClickOutside
}

export default useClickOutside
